<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
    <link rel="icon" type="image/png" href="./assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Anchor Bootstrap 4.1.3 UI Kit by WowThemesNet</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <!-- Main CSS -->
    <link href="./assets/css/main.css" rel="stylesheet"/>

    <!-- Animation CSS -->
    <link href="./assets/css/vendor/aos.css" rel="stylesheet"/>

</head>

<body>

<!------------------------------------------
NAVBAR:不用改
------------------------------------------->

<!------------------------------------------
HEADER
------------------------------------------->
<div class="jumbotron jumbotron-lg jumbotron-fluid mb-3 bg-primary position-relative">
    <div class="container text-white h-100 tofront">
        <div class="row align-items-center justify-content-center text-center">
            <div class="col-md-10">
                <!-- thymeleaf语法:渲染文章题目 -->
                <h1>SSI 网页内嵌技术</h1>
            </div>
        </div>
    </div>
</div>



<div class="container  pt-5 pb-5" data-aos="fade-up">
    <div class="row justify-content-center">
        <div class="col-md-8 mt-20">
            <article>
                <!-- 此处渲染标题 -->
                <h1><strong>Bold title</strong> for your paragraph</h1>
<!--                <p th:text="${article.content}">Welcome to BeiJing!</p>-->
                <tbody>
                    <td><h3 id="toc_0" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">引子</h3><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;">一般来说我们开发网页的时候，大多都会以一个大的HTML页面来做，来开发，来发布，来维护。初期可能就1-2人维护，随着业务发展，功能迭代，一个首页会相当复杂，那么就有可能会有一个团队来维护，首页包含的功能会有很多，比如，轮播图，分类，商品推荐，广告等等，可以看一下京东：<br><img src="https://img2018.cnblogs.com/blog/841496/202002/841496-20200203170617494-1793500427.jpg" alt="" style="height: auto; max-width: 100%; margin: 10px; width: 1849px;">￼<br><img src="https://img2018.cnblogs.com/blog/841496/202002/841496-20200203170617580-1718749079.jpg" alt="" style="height: auto; max-width: 100%; margin: 10px; width: 1847px;">￼<br><img src="https://img2018.cnblogs.com/blog/841496/202002/841496-20200203170617778-1271940809.jpg" alt="" style="height: auto; max-width: 100%; margin: 10px; width: 1846px;">￼</p><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;">以上三张图中的红框部分，其实都是每个页面中的一个小功能，他们都可以单独拿出来作为一个单独的页面，随后再嵌入到页面中，如此一来，就更加便于团队的开发和维护了，同时也能提供公用化的功能，减少重复代码。</p><h3 id="toc_1" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">SSI</h3><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;">那么如何进行网页内嵌呢，我相信经历过jsp时代的应该会知道include，其实我们这里使用的原理也是一样的。</p><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;">SSI就是server side include，网页服务端内嵌技术，像Apache，Nginx都支持。可以把页面拆分成小页面后，再合并聚合在一起显示给用户。</p><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;">ssi的可定义扩展名为：<em>.stm、</em>&nbsp;<em>.shtm、</em>&nbsp;<em>.shtml</em></p><h3 id="toc_2" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">标签使用</h3><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;">如下，看似和jsp的include是类似的，道理也是一样的</p><pre style="margin-bottom: 0px; white-space: pre-wrap; color: rgb(0, 0, 0); font-size: 15px; background-color: rgb(255, 255, 255);"><code class="language-text">&lt;!--#include virtual="/pages/index/abc.html"  --&gt;
</code></pre><h3 id="toc_3" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">在nginx中配置ssi</h3><ul style="list-style: none; margin-right: 0px; margin-bottom: 0px; margin-left: 30px; padding: 0px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><li style="list-style-type: disc;"><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">如何安装nginx的，不多说了，参考我以前的博客：<br><a href="https://www.cnblogs.com/leechenxiang/p/7086298.html" style="color: rgb(70, 70, 70);">https://www.cnblogs.com/leechenxiang/p/7086298.html</a></p></li><li style="list-style-type: disc;"><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">准备如下页面，主要是配置首页的include标签：</p></li><li style="list-style-type: disc;"><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">nginx中的ssi配置如下：<br><img src="https://img2018.cnblogs.com/blog/841496/202002/841496-20200203170616360-2141114435.jpg" alt="" style="height: auto; max-width: 100%; margin: 10px; width: 1103px;">￼</p></li><li style="list-style-type: disc;"><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">nginx.conf 配置：</p><pre style="margin-bottom: 0px; white-space: pre-wrap;"><code class="language-text">server {
    listen       80;<br>
    server_name  localhost;<br>
    # 开启 ssi<br>
    ssi on;<br>
    # ssi 出错是不会打印日志<br>
    ssi_silent_errors on;<br>
    # 默认的静态页面后缀为 html，如果想自定义，比如使用shtml则开启下方注释<br>
    # ssi_types text/shtml;<br>
    location / {<br>
        # root   html;<br>
        # 指定静态文件所在位置<br>
        root        ssi;<br>
        # 默认首页，如果你的后缀在上方修改为 *.shtml，则下方也需要跟着修改<br>
        index       index.html index.htm;<br>
    }<br>
}
</code></pre></li><li style="list-style-type: disc;"><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">html如下：<br><img src="https://img2018.cnblogs.com/blog/841496/202002/841496-20200203170614409-1512999025.jpg" alt="" style="height: auto; max-width: 100%; margin: 10px; width: 382px;">￼<br><img src="https://img2018.cnblogs.com/blog/841496/202002/841496-20200203170615876-1958615048.jpg" alt="" style="height: auto; max-width: 100%; margin: 10px; width: 1018px;">￼</p></li><li style="list-style-type: disc;"><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">github地址：<a href="https://github.com/leechenxiang/ssi-demo" style="color: rgb(70, 70, 70);">https://github.com/leechenxiang/ssi-demo</a></p></li></ul><h3 id="toc_4" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">精品推荐</h3><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;">如果你是一名java开发人员，在如此激烈的竞争中，为亲爱的你推荐如下架构师进阶课程噢~<br><a href="https://class.imooc.com/sale/javaarchitect" style="color: rgb(70, 70, 70);">https://class.imooc.com/sale/javaarchitect</a></p></td>
                </tbody>
            </article>
        </div>
    </div>
</div>
<!-- End Main -->
<!--------------------------------------
JAVASCRIPTS:不用改
--------------------------------------->
<!-- CDN 引入vue 和 axios -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="./assets/js/functions.js" type="text/javascript"></script>

<!-- Animation -->
<script src="./assets/js/vendor/aos.js" type="text/javascript"></script>
<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
</script>

<script type="module">
    import { onMounted, ref } from 'vue'
    import request from '@/utils/request.js'
    defineProps({
        data: {
            type: Array,
            required: true
        }
    })
    //获取数据
    const blogs = ref([])
    const getData = async () => {
        let res = await request({
            url: '/article/2/1',
            method: 'GET'
            //data: { content: '好' }
        })
        console.log('res:', res)
        blogs.value = res.rows
        console.log('blogs', blogs)
    }

    onMounted(() => {
        getData(),
            console.log("'blogs', blogs")
    })
</script>

<!-- Disable animation on less than 1200px, change value if you like -->
<script>
    AOS.init({
        disable: function () {
            var maxWidth = 1200;
            return window.innerWidth < maxWidth;
        }
    });
    // $(document).ready(function () {
    //
    //     if(location.href.indexOf("#reloaded")==-1){
    //         location.href=location.href+"#reloaded";
    //         location.reload();
    //     }
    // })
    if (location.href.indexOf("#reloaded") == -1) {
        location.href = location.href + "#reloaded";
        location.reload();
    };
</script>

</body>
</html>